// 文件下载
import {download} from './utils/downloadMp3Util.js'

new Vue({
	el: "#app",
	data() {
		return {
			token: '',
			phoneLoginVisible: false, //手机登录窗口开关
			pwdLoginVisible: false, //密码登录开关
			wxLoginVisible: false, //微信扫码登录开关
			phoneRegisterVisible: false, //手机号注册
			// 登录提交的数据
			loginForm: {
				phone: '', //账号
				password: '', //密码
				verifyCode: '', //短信验证码
			},
			// 注册提交的数据
			registerForm: {
				phone: '', //账号
				password: '', //密码
				verifyCode: '', //短信验证码
			},
			userInfo: '', //登录用户信息
			wxCodeUrl: '', //微信验证码链接
			timer: 0, // 登录验证码倒计时
			registerTimer: 0, //注册验证码倒计时
			key: '',
			menus: [{
					id: '1',
					name: '发现音乐',
					className: 'menu1',
					url: 'menus/find/find.html',
				},
				{
					id: '2',
					name: '我的音乐',
					className: 'menu2',
					url: 'menus/mySong/mySong.html'
				},
				{
					id: '3',
					name: '关注',
					className: 'menu3',
					url: 'menus/attention.html'
				},
				{
					id: '4',
					name: '商城',
					className: 'menu4',
					url: 'menus/shop.html'
				},
				{
					id: '5',
					name: '音乐人',
					className: 'menu5',
					url: 'menus/creator.html'
				},
				{
					id: '6',
					name: '客户端',
					className: 'menu6',
					url: 'menus/client.html'
				}
			],
			// iframe 页面url，默认是 发现音乐-推荐页面
			menuUrl: 'menus/find/find.html',
			menuClassName: '.menu1',
			menuId: '1',
			childrenMenus: [{
					id: '1',
					name: '推荐',
					className: 'menu1-1',
					url: 'menus/find/find.html'
				},
				{
					id: '2',
					name: '排行榜',
					className: 'menu1-2',
					url: 'menus/find/top.html'
				},
				{
					id: '3',
					name: '歌手',
					className: 'menu1-3',
					url: 'menus/find/singer.html'
				},
				{
					id: '4',
					name: '歌单',
					className: 'menu1-4',
					url: 'sheet/sheet.html?id=1'
				},
			],
			childrenClassName: '.menu1',
			childrenMenuId: '1',
			// 播放列表
			songList: [{
					"songId": 167827,
					"songName": "素颜",
					"songUrl": "https://pony-1312090731.cos.ap-beijing.myqcloud.com/yxy/songs/202308230923159a05f4f949b74810a58fc3046f9becef.mp3",
					"songImg": "http://p1.music.126.net/LMyITvYRS7NsgA9lYUKpqg==/109951164179134667.jpg?param=130y130",
					"songLyric": "[00:00.000] 作词 : 许嵩\\n[00:00.075] 作曲 : 许嵩\\n[00:00.150] 编曲 : 夏侯哲\\n[00:00.225] 制作人 : 许嵩\\n[00:00.300]\\n[00:00.300]\\n[00:13.050]又是一个安静的晚上\\n[00:15.900]一个人窝在摇椅里乘凉\\n[00:18.840]我承认这样真的很安详\\n[00:21.170]和楼下老爷爷一样\\n[00:24.530]听说你还在搞什么原创\\n[00:27.350]搞来搞去好像也就这样\\n[00:30.210]不如花点时间想想\\n[00:32.300]琢磨一下模样\\n[00:35.630]今夜化了美美的妆\\n[00:38.450](我相信是很美美的装)\\n[00:41.480]我摇晃在舞池中央\\n[00:44.310](那种体态可以想象)\\n[00:47.450]我做我的改变 又何必纠结\\n[00:51.510]那就拜托别和我碰面\\n[00:57.160]如果再看你一眼\\n[00:59.870]是否还会有感觉\\n[01:02.590]当年素面朝天要多纯洁就有多纯洁\\n[01:08.310]不画扮熟的眼线\\n[01:11.040]不用抹匀粉底液\\n[01:14.069]暴雨天 照逛街\\n[01:16.860]偷笑别人花了脸\\n[01:19.590]如果再看你一眼\\n[01:22.489]是否还会有感觉\\n[01:25.360]最真实的喜怒哀乐全都埋葬在昨天\\n[01:30.900]不掺任何的表演\\n[01:33.580]轰轰烈烈那几年\\n[01:36.540]我怀念 别怀念\\n[01:39.430]怀念也回不到从前\\n[02:00.620]又是一个安静的晚上\\n[02:02.980]一个人窝在摇椅里乘凉\\n[02:05.879]我承认这样真的很安详\\n[02:08.370]和楼下老爷爷一样\\n[02:11.650]听说你还在搞什么原创\\n[02:14.740]搞来搞去好像也就这样\\n[02:17.500]不如花点时间想想\\n[02:19.490]琢磨一下模样\\n[02:23.030]今夜化了美美的妆\\n[02:25.580](我相信是很美美的装)\\n[02:28.710]我摇晃在舞池中央\\n[02:31.220](那种体态可以想象)\\n[02:34.319]我做我的改变 又何必纠结\\n[02:38.710]那就拜托别和我碰面\\n[02:44.370]如果再看你一眼\\n[02:47.110]是否还会有感觉\\n[02:49.889]当年素面朝天要多纯洁就有多纯洁\\n[02:55.620]不画扮熟的眼线\\n[02:58.330]不用抹匀粉底液\\n[03:01.229]暴雨天 照逛街\\n[03:03.990]偷笑别人花了脸\\n[03:06.849]如果再看你一眼\\n[03:09.759]是否还会有感觉\\n[03:12.569]最真实的喜怒哀乐全都埋葬在昨天\\n[03:18.150]不掺任何的表演\\n[03:20.819]轰轰烈烈那几年\\n[03:23.800]我怀念 别怀念\\n[03:26.439]怀念也回不到从前\\n[03:30.870]曾经对上的瞬间\\n[03:33.550]难道是一种错觉\\n[03:36.090]那些流逝了的就永远不会复现\\n[03:41.250]不掺任何的表演\\n[03:43.530]轰轰烈烈那几年\\n[03:46.389]有遗憾的感觉 为何感觉\\n[03:50.490]那消失不见的素颜\\n",
					"singer": [{
						"singerId": 5771,
						"singerName": "许嵩"
					}],
					"isLove": 0,
					// "albumName": "素颜"
					"album": [{
						"albumId": 16949,
						"albumName": "素颜"
					}],
				},
				// {
				// 	"songName": "大眠（完整版）",
				// 	"songUrl": "https://pony-1312090731.cos.ap-beijing.myqcloud.com/yxy/songs/20230406041905ed26df4800a344a1bad638074075befa.mp3",
				// 	"singerName": "王唯乐",
				// 	"albumName": "大眠",
				// 	"songImg": "http://p1.music.126.net/zgDvTPDSYKjQUjkV8sQUOA==/109951164605092552.jpg?param=130y130",
				// 	"songLyric": "[00:00.000] 作词 : 施人诚\n[00:00.099] 作曲 : 张简君伟\n[00:00.198] 编曲 : 明锐\n[00:00.297] 制作人 : 衣睿\n[00:00.396] 原唱 : 王心凌\n[00:00.495] 混音 : 李琰祥\n[00:00.594] 录音 : 李亚男\n[00:00.693] 配唱制作人 : 龚淑均\n[00:00.792] 吉他 : 陈柏彤\n[00:00.891] 和声 : 闵成伟\n[00:00.990]本作品经过词曲著作权利方授权\n[00:01.040]都快忘了怎样恋一个爱\n[00:04.240]我被虚度了的青春\n[00:06.550]也许还能活过来\n[00:09.570]说心疼我的更应该明白\n[00:12.280]我当然会沉醉个痛快\n[00:16.390]\n[00:17.490]就让我陪她恋完这场爱\n[00:20.260]只求心花终于盛开\n[00:22.760]就没有别的期待\n[00:25.420]等梦完醒来\n[00:27.390]再去收拾残骸\n[00:32.310]\n[00:35.110]感谢她把我 当成傻子\n[00:42.570]每天都哄我 上当一次\n[00:49.700]\n[00:51.630]清醒一辈子 也就那样子\n[00:59.480]不介意用爱 来醉生梦死\n[01:07.457]原来被催眠 真有意思\n[01:13.500]\n[01:15.430]我乐于做个 敬业人质\n[01:21.584]\n[01:23.548]没空再去对谁解释\n[01:26.986]是我自己把自己挟持\n[01:30.530]不关她的事\n[01:36.968]\n[01:37.360]都快忘了怎样恋一个爱\n[01:39.980]我被虚度了的青春\n[01:42.340]也许还能活过来\n[01:45.259]说心疼我的更应该明白\n[01:47.849]我当然会沉醉个痛快\n[01:52.488]\n[01:53.099]就让我陪她恋完这场爱\n[01:55.878]只求心花终于盛开\n[01:58.369]就没有别的期待\n[02:01.328]等梦完醒来\n[02:03.230]再去收拾残骸\n[02:08.355]\n[02:11.364]如果不失去理智\n[02:14.955]爱情要从何开始\n[02:17.794]傻傻的骗子\n[02:19.623]和骗人的傻子\n[02:22.405]才可能一生一世\n[02:28.786]\n[02:29.526]都快忘了怎样恋一个爱\n[02:31.895]我被虚度了的青春\n[02:34.325]也许还能活过来\n[02:37.325]说心疼我的更应该明白\n[02:39.955]我当然会沉醉个痛快\n[02:45.026]就让我陪她恋完这场爱\n[02:47.825]只求心花终于盛开\n[02:50.375]就没有别的期待\n[02:53.366]等梦完醒来\n[02:55.410]再去收拾残骸\n[02:59.825]\n[03:00.824]总策划：乃可/黄俊\n[03:01.824]企划：沈峻峻/冉启升/李莹\n[03:02.727]OP：华研国际音乐股份有限公司 HIM Music Publishing Inc.\n[03:02.935]本歌曲来自〖云上工作室〗\n[03:03.044]10亿现金激励，千亿流量扶持！\n[03:03.153]业务联系：yunmusic_2013@163.com\n"
				// }
			],
			currentIndex: 0, //当前播放歌曲下标
			song: '', //当前播放的歌曲
			songCurrentTime: 0, //歌曲播放当前时间
			duration: 100, // 歌曲播放 进度条总长
			volume: 30, //歌曲默认音量
			volumeMax: 100, //歌曲最大音量
			drawerVisible: false, //歌曲播放列表抽屉开关
			direction: 'rtl' //抽屉打开方向 right to left
		}
	},
	mounted() { // 生命周期函数
		// 获取歌曲list信息 
		this.getSongInfo()
		// 获取歌词
		this.getLyrics()
		window.getChildrenSongList = this.getChildrenSongList
		window.currentIndex = this.currentIndex
		window.getOneSong = this.getOneSong
		window.songList = this.songList
		// 获取扫码用户的 token
		this.getWxToken()
	},
	methods: {
		// 接受子页面传来的单个歌曲数据
		getOneSong(song) {
			console.log(song)
			this.songList.push(song)
		},
		// 接受子页面传来的歌曲列表数据
		// 注意需要暴露给全局，这样的话，子页面才能调用相对应的方法
		getChildrenSongList(data, currentIndex) {
			// this.currentIndex = 0
			this.songList = ''
			console.log('index歌曲下标' + currentIndex)
			if (data != null) {

				//1、赋值
				this.songList = data

				//3、开始播放第一首歌
				// currentIndex ：null 全部播放
				//              ：-1   暂停
				//              ：其他 要播放的歌曲下标 
				// 全部播放
				if (currentIndex == null) {
					// 调用子页面方法将，正在播放歌曲下标传给子页面
					const iframeDocument = document.getElementById("indexIframe")
					console.log(iframeDocument)
					iframeDocument.contentWindow.getIndexCurrentIndex(this.currentIndex)
					this.currentIndex = 0
					this.getSongInfo()
					this.isPlay()
				} else if (currentIndex == -1) {
					this.currentIndex = 0
					this.getSongInfo()
					this.isPause()
				} else {
					this.currentIndex = currentIndex
					this.getSongInfo()
					this.isPlay()
				}
			}
		},
		getMenuUrl(className, id, url) {
			// 1、控制下方 mian 的内容
			this.menuId = id
			this.menuUrl = url
			// 选中菜单链接添加背景阴影
			// 2、先删除上一个点击的 导航超链接的选择器，去掉样式
			const menuDocumentRemove = document.querySelector(this.menuClassName)
			if (menuDocumentRemove.classList.contains('active')) {
				menuDocumentRemove.classList.remove('active')
			}
			// 3、为用户点击的导航超链接添加选择器 即 className
			const menuDocumentToggle = document.querySelector('.' + className);
			// 记录 被添加选择器的 超链接
			this.menuClassName = '.' + className;
			// 删除选择器
			menuDocumentToggle.classList.add('active');

			// 为分割线添加小三角（before 伪类）
			//1、添加前先删除 上一个点击的样式
			const hrDocumentRemove = document.querySelector('.hr')
			//2、为用户点击的分割线添加伪类
			const hrDocument = document.querySelector('.hr')
			hrDocumentRemove.classList.remove(this.active)
			var active = 'active' + id
			// 记录
			this.active = active
			const hrDocumentToggle = document.querySelector('.hr');
			// 切换类：active，存在删除，不存在，就添加;
			hrDocumentToggle.classList.toggle(active);
		},
		// 子菜单 选中添加背景阴影
		getChildrenMenuUrl(className, id, url) {
			// 1、控制下面主体main页面
			this.menuUrl = url
			this.childrenMenuId = id
			// 2、先删除上一个点击的 导航超链接的选择器，去掉样式
			// 导航选中阴影
			const menuDocumentRemove = document.querySelector(this.childrenClassName)
			if (menuDocumentRemove.classList.contains('active')) {
				menuDocumentRemove.classList.remove('active')
			}
			// 3、为用户点击的导航超链接添加选择器
			const menuDocumentToggle = document.querySelector('.' + className);
			// 记录 被添加选择器的 超链接
			this.childrenClassName = '.' + className;
			// 切换类：active，存在删除，不存在，就添加;
			menuDocumentToggle.classList.add('active')
		},
		// 点击登录按钮
		phoneLogin() {
			this.phoneRegisterVisible = false
			this.phoneLoginVisible = true
			this.pwdLoginVisible = false
			this.wxLoginVisible = false
			// // 清空表单
			this.loginForm = {}
		},
		// 通过密码登录
		pwdLogin() {
			this.phoneRegisterVisible = false
			this.phoneLoginVisible = false
			this.wxLoginVisible = false
			this.pwdLoginVisible = true
			// // 清空表单
			this.loginForm = {}
		},
		// 通过微信扫码登录
		wxLogin() {
			this.phoneRegisterVisible = false
			this.phoneLoginVisible = false
			this.pwdLoginVisible = false
			this.wxLoginVisible = true
			// // 清空表单
			this.loginForm = {}
			// 获取验证码图片链接
			axios({
				method: 'get',
				url: 'http://localhost:8160/api/ucenter/wx/login',
			}).then(res => {
				//处理返回的数据，如果登录成功，保留登录成功的状态，转向成功页面。如果登录不成功，提示用户
				if (res.data != undefined && res.data.code == 200) {
					console.log(res.data)
					this.wxCodeUrl = res.data.data.codeUrl
					this.getToken
					// setInterval(() => {

					// }, 1000, {
					// 	// 默认不开启定时任务
					// 	immediate: false
					// })
				} else { //登陆失败
					this.$message.error(res.data.message)
				}
			})
		},
		// 通过手机号注册
		phoneRegister() {
			this.phoneLoginVisible = false
			this.wxLoginVisible = false
			this.pwdLoginVisible = false
			this.phoneRegisterVisible = true
		},
		// 获取地址栏上的 url，获取扫码登录用户的 token
		getWxToken() {
			// http://127.0.0.1:8848/yxy-pre/pages/index.html?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJybS11c2VyIiwiaWF0IjoxNjgzMTE0NDQ1LCJleHAiOjE2ODMyMDA4NDUsImlkIjoiMSJ9.0tW7LpDK_PCf1YchaWS1jqdiS1cHooNKMTeWNQchQ4w
			var url = window.location.href
			// 判断地址栏中是否有token
			if (url.indexOf('token') != -1) {
				// 根据 = 分割成数组，第二个元素就是 token 值
				var urlArr = url.split("=")
				var token = urlArr[1]
				// 根据token获取登录用户信息
				this.getUserInfo(token)
				// 写入cookie
				document.cookie = 'yxy-pre:user_token=' + token
			} else {
				this.getUserInfo(null)
			}
		},
		// 检查登录手机号格式
		checkPhone() {
			if (this.loginForm.phone == '' || this.loginForm.phone == null) {
				this.$message.error("手机号为空！")
				return false
			} else {
				var re = /^1[3,4,5,6,7,8,9][0-9]{9}$/;
				var result = re.test(this.loginForm.phone);
				if (!result) {
					this.$message.error("手机号格式错误！")
					return false
				}
			}
			return true
		},
		checkRegisterPhone() {
			if (this.registerForm.phone == '' || this.registerForm.phone == null) {
				this.$message.error("手机号为空！")
				return false
			} else {
				var re = /^1[3,4,5,6,7,8,9][0-9]{9}$/;
				var result = re.test(this.registerForm.phone);
				if (!result) {
					this.$message.error("手机号格式错误！")
					return false
				}
			}
			return true
		},
		// 检查登录验证码是否填写
		checkVerifyCode() {
			if (this.loginForm.verifyCode == '' || this.loginForm.verifyCode == null) {
				this.$message.error("验证码为空！")
				return false
			}
			return true
		},
		// 检查注册验证码是否填写
		checkRegisterkVerifyCode() {
			if (this.registerForm.verifyCode == '' || this.registerForm.verifyCode == null) {
				this.$message.error("验证码为空！")
				return false
			}
			return true
		},
		// 检查密码是否填写
		checkPassword() {
			if (this.loginForm.password == '' || this.loginForm.password == null) {
				this.$message.error("密码为空！")
				return false
			}
			return true
		},
		// 获取登录验证码
		getLoginVerifyCode() {
			// 先判断一下用户手机号是否正确
			if (this.checkPhone()) {
				// 开启倒计时效果
				if (this.timer === 0) {
					this.timer = 60
					axios({
						method: 'get',
						url: 'http://localhost:8160/user/login/VerifyCode',
					}).then(res => {
						if (res.data != undefined && res.data.code == 200) {
							console.log(res.data)
							// const codeButtonDocument = document.querySelector('.verifyCodeButton')
						} else {
							this.$message.error(res.data.message)
						}
					})
					setInterval(() => {
						if (this.timer <= 0) {
							return
						} else {
							// 单次定时任务执行的回调
							this.timer--
						}
					}, 1000, {
						// 默认不开启定时任务
						immediate: false
					})
				} else {
					return
				}
			}
		},
		// 获取注册验证码
		getRegisterVerifyCode() {
			// 先判断一下用户手机号是否正确
			if (this.checkRegisterPhone()) {
				// 开启倒计时效果
				if (this.registerTimer === 0) {
					this.registerTimer = 60
					axios({
						method: 'get',
						url: 'http://localhost:8160/user/register/VerifyCode',
					}).then(res => {
						if (res.data != undefined && res.data.code == 200) {
							console.log(res.data)
							// const codeButtonDocument = document.querySelector('.verifyCodeButton')
						} else {
							this.$message.error(res.data.message)
						}
					})
					setInterval(() => {
						if (this.registerTimer <= 0) {
							return
						} else {
							// 单次定时任务执行的回调
							this.registerTimer--
						}
					}, 1000, {
						// 默认不开启定时任务
						immediate: false
					})
				} else {
					return
				}
			}
		},
		// 通过手机验证码登录
		loginByPhone() {
			// 先判断一下用户手机号是否正确
			if (this.checkPhone()) {
				// 检查验证码是否填写
				if (this.checkVerifyCode()) {
					axios({
						method: 'post',
						url: 'http://localhost:8160/user/login/phone/' + this.loginForm.verifyCode +
							'/' + this.loginForm.phone,
					}).then(res => {
						//处理返回的数据，如果登录成功，保留登录成功的状态，转向成功页面。如果登录不成功，提示用户
						if (res.data != undefined && res.data.code == 200) {
							console.log(res.data)
							// 将后端的token令牌存到前端，cookie中
							document.cookie = 'yxy-pre:user_token=' + res.data.data.token
							// 根据 key 获取 cookie value
							// var cookie = this.getCookie('yxy-pre:user_token')
							// console.log(cookie)
							// 获取登录用户信息
							this.getUserInfo()
							this.phoneLoginVisible = false
							this.pwdLoginVisible = false
							this.$message.success(res.data.message)
						} else { //登陆失败
							this.$message.error(res.data.message)
						}
					})
				}
			}
		},
		// 通过用户名密码登录
		loginByPwd() {
			// 先判断一下用户手机号是否正确
			if (this.checkPhone()) {
				// 检查密码是否填写
				if (this.checkPassword()) {
					axios({
						method: 'post',
						url: 'http://localhost:8160/user/login/pwd/' + this.loginForm.phone + '/' +
							this.loginForm.password,
					}).then(res => {
						//处理返回的数据，如果登录成功，保留登录成功的状态，转向成功页面。如果登录不成功，提示用户
						if (res.data != undefined && res.data.code == 200) {
							console.log(res.data)
							// 将后端的token令牌存到前端，cookie中
							document.cookie = 'yxy-pre:user_token=' + res.data.data.token
							// 根据 key 获取 cookie value
							// var cookie = this.getCookie('yxy-pre:user_token')
							// console.log(cookie)
							// 获取登录用户信息
							this.getUserInfo()
							this.phoneLoginVisible = false
							this.pwdLoginVisible = false
							this.$message.success(res.data.message)
						} else { //登陆失败
							this.$message.error(res.data.message)
						}
					})
				}
			}
		},
		// 通过手机号注册
		registerByPhone() {
			// 先判断一下用户手机号是否正确
			if (this.checkRegisterPhone()) {
				// 检查验证码是否填写
				if (this.checkRegisterkVerifyCode()) {
					axios({
						method: 'post',
						url: 'http://localhost:8160/user/register/phone/' + this.registerForm
							.verifyCode +
							'/' + this.registerForm.phone,
					}).then(res => {
						//处理返回的数据，如果登录成功，保留登录成功的状态，转向成功页面。如果登录不成功，提示用户
						if (res.data != undefined && res.data.code == 200) {
							console.log(res.data)
							// // 清空注册页面的数据
							// this.registerForm = ''
							// // 清空登录页面的数据
							// this.loginForm = ''
							// 打开登录页面
							this.phoneLogin()
						} else { //登陆失败
							this.$message.error(res.data.message)
						}
					})
				}
			}
		},
		// 通过值获取cookie
		getCookie(key) {
			// 如果浏览器中有多个cookie，会以 ；分隔 例如：a=a1;b=b1
			// 根据 ；将 cookie 字符串分割成数组 
			var cookieArr = document.cookie.split("; ");
			// 遍历数组
			for (var i = 0; i < cookieArr.length; i++) {
				// 再根据 = 分隔数组中的每一个元素，数组第一个就是key，第二个就是value
				var cookiePair = cookieArr[i].split("=");
				if (key == cookiePair[0]) {
					return decodeURIComponent(cookiePair[1]);
				}
			}
			return null;
		},
		// 登录成功后通过token，获取登录用户信息
		getUserInfo(token) {
			if (token == null || token == '') { //没传值从cookie里找
				this.token = this.getCookie('yxy-pre:user_token')
			} else { //传值了，用传递的值
				this.token = token
			}
			axios({
				method: 'get',
				url: 'http://localhost:8160/user/getUserInfo',
				headers: {
					'token': this.token
				}
			}).then(res => {
				//处理返回的数据，如果登录成功，保留登录成功的状态，转向成功页面。如果登录不成功，提示用户
				if (res.data != undefined && res.data.code == 200) {
					console.log(res.data)
					// 赋值
					this.userInfo = res.data.data.userInfo
				} else {
					this.$message.error(res.data.message)
				}
			})
		},
		// 回到顶部
		backTop() {
			// 这两个都是为了获取当前页面滚动条纵坐标的位置
			// 两个都写是为了兼容性 谷歌浏览器只认识document.body.scrollTop
			// documentElement 对应html标签
			// body 对应 body
			document.body.scrollTop = 0,
				document.documentElement.scrollTop = 0
		},
		//foot
		// 当状态是解锁状态时，鼠标悬于底部播放器
		mouseOnFoot() {
			// 1、获取锁的 Document
			const lockDocument = document.querySelector('#lock')
			if (lockDocument.classList.contains('icon-jiesuo')) {
				const footDocument = document.querySelector('.foot')
				footDocument.style.marginBottom = '0px';
			}
		},
		// 当状态是解锁状态时，鼠标离开底部播放器，
		mouseLeaveFoot() {
			const lockDocument = document.querySelector('#lock')
			if (lockDocument.classList.contains('icon-jiesuo')) {
				const footDocument = document.querySelector('.foot')
				footDocument.style.marginBottom = '-46px';
			}
		},
		// 底部播放器，是否锁
		isLock() {
			// 1、获取锁的 Document
			const lockDocument = document.querySelector('#lock')
			if (lockDocument.classList.contains('icon-jiesuo')) {
				// 移除类名 icon-jiesuo 解锁
				lockDocument.classList.remove('icon-jiesuo')
				// 添加类名 icon-suoding 锁定
				lockDocument.classList.add('icon-suoding')
				// 如果是锁定 播放器就不让它下去了
				const footDocument = document.querySelector('.foot')
				footDocument.style.marginBottom = '0px';
			} else if (lockDocument.classList.contains('icon-suoding')) {
				// 移除类名 icon-suoding 锁定
				lockDocument.classList.remove('icon-suoding')
				// 添加类名 icon-jiesuo 解锁
				lockDocument.classList.add('icon-jiesuo')
				// 如果是解锁 播放器默认是下去了
				const footDocument = document.querySelector('.foot')
				footDocument.style.marginBottom = '-46px';
			}
		},
		// 加载音乐信息
		getSongInfo() {
			this.song = this.songList[this.currentIndex]
			console.log(this.song)
			// 设置歌曲图片
			const imgDocument = document.querySelectorAll('.song-img img')
			imgDocument[0].setAttribute('src', this.song.songImg)
			imgDocument[1].setAttribute('src', this.song.songImg)
			// 设置歌曲
			const audioDocument = document.querySelector('#song')
			audioDocument.setAttribute('src', this.song.songUrl)
			// 设置沉浸模式歌曲背景图片
			const immerseMaskDocument = document.querySelector('div.immerse-mask img')
			immerseMaskDocument.setAttribute('src', this.song.songImg)
		},
		// 循环模式 图标变化循序  列表循环 -> 单曲循环 -> 随机播放
		roundButton() {
			// 循环模式 Document
			const roundDocument = document.querySelectorAll('#round')
			for (var i = 0; i < roundDocument.length; i++) {
				if (roundDocument[i].classList.contains('icon-liebiaoxunhuan')) { // 列表循环
					// 移除类名 icon-liebiaoxunhuan 列表循环
					roundDocument[i].classList.remove('icon-liebiaoxunhuan')
					// 添加类名 icon-danquxunhuan 单曲循环
					roundDocument[i].classList.add('icon-danquxunhuan')
				} else if (roundDocument[i].classList.contains('icon-danquxunhuan')) { // 单曲循环
					// 移除类名 icon-danquxunhuan 单曲循环
					roundDocument[i].classList.remove('icon-danquxunhuan')
					// 添加类名 icon-suiji 随机循环
					roundDocument[i].classList.add('icon-suiji')
				} else if (roundDocument[i].classList.contains('icon-suiji')) { // 随机播放
					// 移除类名 icon-suiji 随机循环
					roundDocument[i].classList.remove('icon-suiji')
					// 添加类名 icon-liebiaoxunhuan 列表循环
					roundDocument[i].classList.add('icon-liebiaoxunhuan')
				}
			}
		},
		// 播放 / 暂停
		playButton() {
			// 播放 、暂停
			const playDocument = document.querySelector('#play')
			if (playDocument.classList.contains('icon-bofang')) { //判断播放状态 播放
				this.isPlay()
			} else if (playDocument.classList.contains('icon-24gf-pause2')) { //判断播放状态 暂停
				this.isPause()
			}
		},
		// 播放列表的播放键
		listPlayButton(index) {
			// 正在播放的歌曲下表
			console.log(index)
			if (index != null) {
				this.currentIndex = index
			}
			// 重新加载音乐信息
			this.getSongInfo()
			// 调用播放音乐
			this.isPlay()
		},
		// 播放歌曲
		isPlay() {
			// 播放 、暂停
			const playDocument = document.querySelector('#play')
			// 沉浸模式的 paly 播放键
			const playDocument2 = document.querySelector('#play2')
			// 播放列表的 play 播放键
			// var playIndex = '#' + index
			// const playDocument3 = document.querySelector(playIndex)

			// 移除类名 fa-play 播放
			playDocument.classList.remove('icon-bofang')
			playDocument2.classList.remove('icon-bofang')
			// playDocument3.classList.remove('icon-24gl-play')
			// 添加类名 fa-pause 暂停
			playDocument.classList.add('icon-24gf-pause2')
			playDocument2.classList.add('icon-24gf-pause2')
			// playDocument3.classList.add('icon-24gf-pause2')

			// 获取歌词
			this.getLyrics()

			// 播放音乐 设置音量
			const songDocument = document.querySelector('#song')
			songDocument.play();

			// 设置音量
			songDocument.volume = this.volume / 100

			// songDocument.currentTime = 310
			//歌曲播放完毕
			songDocument.addEventListener(('ended'), this.isEnd, false)
		},
		// 歌曲播放完毕 (循环、单曲、随机)
		isEnd() {
			// 为歌曲添加播放量
			axios({
				method: 'post',
				url: 'http://localhost:8160/top/addPlayCount/' + this.song.songId,
				headers: {
					'token': this.getCookie('yxy-pre:user_token')
				}
			}).then(res => {
				//处理返回的数据，如果登录成功，保留登录成功的状态，转向成功页面。如果登录不成功，提示用户
				if (res.data != undefined && res.data.code == 200) {
					console.log(res.data)
				} else { //登陆失败
					this.$message.error(res.data.message)
				}
			})

			console.log('音乐播放完毕')
			// console.log('音乐播放完毕')
			// 循环模式 (循环、单曲、随机)
			const roundDocument = document.querySelector('#round')
			if (roundDocument.classList.contains('icon-liebiaoxunhuan')) { // 列表循环
				// 直接调用下一首
				this.nextButton()
			} else if (roundDocument.classList.contains('icon-danquxunhuan')) { // 单曲循环
				// 重新加载音乐信息
				this.getSongInfo()
				// 播放歌曲
				this.isPlay()
			} else if (roundDocument.classList.contains('icon-suiji')) { // 随机播放
				/* 生成随机整数 范围 0 - songList.length -1
				首先使用 Math.random()*10 可得到 0～10.0 之间的一个随机数，
				然后再使用 Math.round() 对 0～10.0 之间的随机数进行四舍五入，
				最终就可得到 0～10 之间的一个随机整数 */
				// console.log(Math.round(Math.random() * (this.songList.length - 1)))
				this.currentIndex = Math.round(Math.random() * (this.songList.length - 1))
				// 重新加载音乐信息
				this.getSongInfo()
				// 播放歌曲
				this.isPlay()
			}
		},
		// 暂停歌曲
		isPause() {
			// 播放 、暂停
			const playDocument = document.querySelector('#play')
			// 沉浸模式的 paly 播放键
			const playDocument2 = document.querySelector('#play2')
			// 播放列表的 play 播放键
			// var playIndex = '#' + index
			// const playDocument3 = document.querySelector(playIndex)

			// 移除类名 fa-play 播放
			playDocument.classList.remove('icon-24gf-pause2')
			playDocument2.classList.remove('icon-24gf-pause2')
			// playDocument3.classList.remove('icon-24gf-pause2')
			// 添加类名 fa-pause 暂停
			playDocument.classList.add('icon-bofang')
			playDocument2.classList.add('icon-bofang')
			// playDocument3.classList.add('icon-24gl-play')

			//暂停音乐
			const songDocument = document.querySelector('#song')
			songDocument.pause();
		},
		// 上一首
		preButton() {
			this.currentIndex--
			// 如果歌曲下标小于0，下标等于 最后一首歌的下标
			if (this.currentIndex < 0) {
				this.currentIndex = this.songList.length - 1
				this.getSongInfo()
				//播放音乐
				setTimeout(() => {
					this.isPlay()
				}, 100)
			}
			this.getSongInfo()
			//播放音乐 
			const playDocument = document.querySelector('#play')
			/* 推迟播放 音乐还没有准备好 就开始播放了会报错
			 * The play() request was interrupted by a new load request
			 */
			setTimeout(() => {
				this.isPlay()
			}, 100)

			// 调用子页面方法将，正在播放歌曲下标传给子页面
			const iframeDocument = document.getElementById("indexIframe")
			console.log(iframeDocument)
			iframeDocument.contentWindow.getIndexCurrentIndex(this.currentIndex)
		},
		// 下一首
		nextButton() {
			this.currentIndex++
			// 如果下一首歌曲下标超过总数，下标等于 0 
			if (this.currentIndex > this.songList.length - 1) {
				this.currentIndex = 0
				this.getSongInfo()
				//播放音乐
				const playDocument = document.querySelector('#play')
				/* 推迟播放 音乐还没有准备好 就开始播放了会报错
				 * The play() request was interrupted by a new load request
				 */
				setTimeout(() => {
					this.isPlay()
				}, 100)
			}
			// 循环模式 (循环、单曲、随机)
			const roundDocument = document.querySelector('#round')
			// 对于 循环和单曲，下一首都是 歌曲下标 + 1

			// 对于 随机 下一首歌的下标取随机值
			if (roundDocument.classList.contains('icon-suiji')) {
				/* 生成随机整数 范围 0 - songList.length -1
				首先使用 Math.random()*10 可得到 0～10.0 之间的一个随机数，
				然后再使用 Math.round() 对 0～10.0 之间的随机数进行四舍五入，
				最终就可得到 0～10 之间的一个随机整数 */
				// console.log(Math.round(Math.random() * (this.songList.length - 1)))
				this.currentIndex = Math.round(Math.random() * (this.songList.length - 1))
				this.getSongInfo()
				//播放音乐
				const playDocument = document.querySelector('#play')
				/* 推迟播放 音乐还没有准备好 就开始播放了会报错
				 * The play() request was interrupted by a new load request
				 */
				setTimeout(() => {
					this.isPlay()
				}, 100)
			} else {
				this.getSongInfo()
				//播放音乐
				const playDocument = document.querySelector('#play')
				/* 推迟播放 音乐还没有准备好 就开始播放了会报错
				 * The play() request was interrupted by a new load request
				 */
				setTimeout(() => {
					this.isPlay()
				}, 100)
			}

			// 调用子页面方法将，正在播放歌曲下标传给子页面
			const iframeDocument = document.getElementById("indexIframe")
			console.log(iframeDocument)
			iframeDocument.contentWindow.getIndexCurrentIndex(this.currentIndex)
		},
		// 歌曲时间变化事件
		songTime() {
			// console.log(this.lyricsArr)
			const audioDocument = document.querySelector('audio')
			const lyricsUlDocument = document.querySelector('.song-lyric ul')
			// 获取音乐总时长 s 313.100101 需要格式化时间 00:00
			var duration = audioDocument.duration;
			// 获取音乐当前播放时间 s
			var currentTime = audioDocument.currentTime;

			// 设置当前时间
			const currentTimeDocument = document.querySelectorAll('.current-time')
			currentTimeDocument[0].textContent = this.formatTime(currentTime)
			currentTimeDocument[1].textContent = this.formatTime(currentTime)
			const timeDocument = document.querySelectorAll('.time')
			// 当当前播放时间是0时（还没有开始播放时），设置总时长为 00:00
			// 否则 没有开始播放时，总时长 = NaN
			if (currentTime == 0) {
				timeDocument[0].textContent = '00:00'
				timeDocument[1].textContent = '00:00'
			} else {
				timeDocument[0].textContent = this.formatTime(duration)
				timeDocument[1].textContent = this.formatTime(duration)
			}
			//设置进度条
			this.duration = audioDocument.duration
			this.songCurrentTime = audioDocument.currentTime

			// 根据当前播放的时间，找到要播放的歌词的下标
			// console.log('当前播放时间：' + audioDocument.currentTime)

			var time = this.songCurrentTime
			// console.log('当前播放时间：' + this.songCurrentTime)
			for (var i = 0; i < this.lyricsArr.length; i++) {
				if (time < this.lyricsArr[i].time) {
					break
				}
			}
			// console.log('歌词下标：' + i)
			// 歌词滚动的最佳位置
			// i 当前播放的是第几句歌词
			i = i - 1
			// 计算 top 值，滚动值
			var top = i * 40 + 40 / 2 - 300 / 2
			if (top < 0) {
				top = 0
			}
			// 滚动
			lyricsUlDocument.style.marginTop = -top + 'px'
			// 高亮显示当前歌词
			// 先去掉 li 里带有 active 的元素
			var lyricLi = lyricsUlDocument.querySelector('.active')
			if (lyricLi) {
				lyricLi.classList.remove('active')
			}
			lyricsUlDocument.children[i].classList.add('active')
		},
		// 歌曲时间进度条
		songTimeChang() {
			console.log("时间改变")
			const audioDocument = document.querySelector('audio')
			console.log(this.duration)
			audioDocument.currentTime = this.songCurrentTime
		},
		// 歌曲音量进度条
		songVolumeChang() {
			console.log("音量改变")
			const audioDocument = document.querySelector('audio')
			audioDocument.volume = this.volume / 100
			const volumeDocument = document.querySelector('#volume')
			// 如果音量等于 0，图标改变
			if (this.volume == 0) {
				if (volumeDocument.classList.contains('icon-24gf-volumeMiddle')) {
					volumeDocument.classList.remove('icon-24gf-volumeMiddle')
					volumeDocument.classList.add('icon-24gf-volumeCross')
				}
			} else {
				if (volumeDocument.classList.contains('icon-24gf-volumeCross')) {
					volumeDocument.classList.remove('icon-24gf-volumeCross')
					volumeDocument.classList.add('icon-24gf-volumeMiddle')
				}
			}
		},
		// 格式化时间 总秒数 -> 00:00
		formatTime(time) {
			// 计算 分钟 、秒数 parseInt 取整
			var min = parseInt(time / 60)
			var second = parseInt(time % 60)
			// 补零
			if (min < 10) {
				min = "0" + min
			} else {
				min = min
			}
			if (second < 10) {
				second = "0" + second
			} else {
				second = second
			}
			// 返回
			return min + ':' + second
		},
		//计算总时间 00:00.000 -> 总时间(秒)
		countTime(time) {
			let min = time.split(':')[0]
			let second = time.split(':')[1]
			// Number() 将字符串转化为数字
			let resultTime = Number(min) * 60 + Number(second)
			// 返回
			return resultTime
		},
		// 当点击音量时
		volumeButton() {
			// 弹出音量滑块
			const volumeDocument = document.querySelector('div.play-volumeSlider')
			//切换类：active，存在删除，不存在，就添加;
			volumeDocument.classList.toggle('active');

		},
		// 当点击沉浸模式音量时
		volumeButton1() {
			// 弹出音量滑块
			const volumeDocument = document.querySelector('div.play-volumeSlider1')
			//切换类：active，存在删除，不存在，就添加;
			volumeDocument.classList.toggle('active1');
		},
		// 用户点击图片遮罩，打开沉浸音乐页面
		openImmerse() {
			// 回到页面顶部，否则下面会有留白
			// document.body.scrollTop = 0,
			// document.documentElement.scrollTop = 0
			// 去掉页面的 y轴的滚动条
			// const bodyDocument = document.querySelector('body')
			// bodyDocument.style.overflowY = 'hidden'
			// 享受页面显现
			const ImmerseDocument = document.querySelector('div.immerse')
			ImmerseDocument.style.visibility = 'visible';
			ImmerseDocument.style.top = '0px';
			// const ImmerseDivDocument = document.querySelector('div.immerseDiv')
			// ImmerseDivDocument.style.visibility = 'visible'
			// ImmerseDivDocument.style.display = 'block'

			// ImmerseDocument.style.display = 'block'


			const immerseFootDocument = document.querySelector('div.immerse-foot')
			immerseFootDocument.style.position = 'fixed'
		},
		// 退出图片遮罩（退出沉浸音乐页面）
		outImmerse() {
			// 回到页面顶部
			// document.body.scrollTop = 0,
			// document.documentElement.scrollTop = 0
			// 显现页面的 y轴 的滚动条
			// const bodyDocument = document.querySelector('body')
			// bodyDocument.style.overflowY = 'visible'

			// 享受页面消失
			const ImmerseDocument = document.querySelector('div.immerse')
			ImmerseDocument.style.visibility = 'hidden';
			ImmerseDocument.style.top = 'calc(100vh)';
			const bodyDocument = document.querySelector('body')

			const immerseFootDocument = document.querySelector('div.immerse-foot')
			// 把绝对定位改了，不然下去的时候，下面播放器那块下来的慢
			immerseFootDocument.style.position = 'relative'

			// 沉浸模式的音量也是固定定位，如果用户在沉浸模式没关，会显示到外面对页面
			// 弹出音量滑块
			const volumeDocument = document.querySelector('div.play-volumeSlider1')
			//切换类：active，存在删除
			if (volumeDocument.classList.contains('active1')) {
				volumeDocument.classList.remove();
			}
			const iDocument = document.querySelector('div.fullView i');
			if (iDocument.classList.contains('icon-quxiaoquanping_o')) {
				this.fullView()
			}

		},
		/* 全屏 / 退出全屏
		全屏之后样式会改变，注意修改使用和伪类选择器一样
		:-webkit-full-screen { }
		:-moz-full-screen { }
		:-ms-fullscreen { }
		:fullscreen { } 
		*/
		/* 发现上面用不了，手动js改样式 
		、*/
		fullView() {
			const iDocument = document.querySelector('div.fullView i');
			const immerseDocument = document.querySelector('.immerse');
			const immerseMainDocument = document.querySelector('.immerse-main');
			// 全屏
			if (iDocument.classList.contains('icon-quanping_o')) {
				// 移除类名 icon-quanping_o 全屏
				iDocument.classList.remove('icon-quanping_o')
				// 添加类名 icon-quxiaoquanping_o 取消全屏
				iDocument.classList.add('icon-quxiaoquanping_o')
				// 获取
				if (document.documentElement.RequestFullScreen) {
					document.documentElement.RequestFullScreen();
					immerseDocument.style.paddingRight = '312px'
					immerseMainDocument.style.height = '800px'
				}
				//兼容火狐
				console.log(document.documentElement.mozRequestFullScreen)
				if (document.documentElement.mozRequestFullScreen) {
					document.documentElement.mozRequestFullScreen();
					immerseDocument.style.paddingRight = '330px'
					immerseMainDocument.style.height = '800px';
					immerseMainDocument.style.paddingTop = '130px'
				}
				//兼容谷歌等可以webkitRequestFullScreen也可以webkitRequestFullscreen
				if (document.documentElement.webkitRequestFullScreen) {
					document.documentElement.webkitRequestFullScreen();
					immerseDocument.style.paddingRight = '330px'
					immerseMainDocument.style.height = '800px';
					immerseMainDocument.style.paddingTop = '130px'
				}
				//兼容IE,只能写msRequestFullscreen
				if (document.documentElement.msRequestFullscreen) {
					document.documentElement.msRequestFullscreen();
					immerseDocument.style.paddingRight = '330px'
					immerseMainDocument.style.height = '800px';
					immerseMainDocument.style.paddingTop = '130px'
				}
			} else if (iDocument.classList.contains('icon-quxiaoquanping_o')) { //取消全屏
				// 移除类名 icon-quxiaoquanping_oo 取消全屏
				iDocument.classList.remove('icon-quxiaoquanping_o')
				// 添加类名 icon-quanping_o 全屏
				iDocument.classList.add('icon-quanping_o')
				if (document.exitFullScreen) {
					document.exitFullscreen()
					immerseDocument.style.paddingRight = '27px'
					immerseMainDocument.style.height = '500px';
					immerseMainDocument.style.paddingTop = '0px'
				}
				//兼容火狐
				console.log(document.mozExitFullScreen)
				if (document.mozCancelFullScreen) {
					document.mozCancelFullScreen()
					immerseDocument.style.paddingRight = '27px'
					immerseMainDocument.style.height = '500px';
					immerseMainDocument.style.paddingTop = '0px'
				}
				//兼容谷歌等
				if (document.webkitExitFullscreen) {
					document.webkitExitFullscreen()
					immerseDocument.style.paddingRight = '27px'
					immerseMainDocument.style.height = '500px';
					immerseMainDocument.style.paddingTop = '0px'
				}
				//兼容IE
				if (document.msExitFullscreen) {
					document.msExitFullscreen()
					immerseDocument.style.paddingRight = '27px'
					immerseMainDocument.style.height = '500px';
					immerseMainDocument.style.paddingTop = '0px'
				}
			}
		},
		// 歌词
		getLyrics() {
			// 添加前，删除上一首歌的歌词ul 下歌词 所有li元素
			var e = document.querySelector('.song-lyric ul');
			var first = e.firstElementChild;
			while (first) {
				first.remove();
				first = e.firstElementChild;
			}
			const lyricsUlDocument = document.querySelector('.song-lyric ul')
			// 获取原始歌词
			// "[00:00.000] 作词 : 许嵩\n[00:00.075] 作曲 : 许嵩\n[00:00.150] 编曲 : 夏侯哲\n[00:00.225] 制作人 : 许嵩\n[00:00.300]\n[00:00.300]\n[00:13.050]又是一个安静的晚上\n[00:15.900]一个人窝在摇椅里乘凉\n[00:18.840]我承认这样真"
			var data = this.songList[this.currentIndex].songLyric
			console.log(data)
			//去掉末尾的 \\n
			var lyricsData = data.slice(0, data.length - 2)

			// 根据 \n 将字符串分割成数组
			var lyrics = lyricsData.split('\\n')
			// console.log(lyrics)
			//去掉末尾的 \\n
			var lyricsData = data.slice(0, data.length - 2)

			// 根据 \n 将字符串分割成数组
			var lyrics = lyricsData.split('\\n')
			// console.log(lyrics)

			// 遍历歌词数组 {time: '[00:00.000]', lyric: ' 作词 : 许嵩'}
			lyrics.forEach((value, index) => {
				// [00:00.000] 作词 : 许嵩
				// console.log('value:' + value)
				// [00:00.000]
				let key = value.split(']')[0] + ']';
				// [00:00.000] -> 00:00.000
				var keyStr = key.slice(1, key.length - 1)
				var keyTime = this.countTime(keyStr)
				// 作词 : 许嵩
				let lyricValue = value.split(']')[1];

				// 转化成对象数组 
				lyrics[index] = {
					time: keyTime,
					lyric: lyricValue
				}
				// ul 下 创建 li
				let lyricLi = document.createElement('li');
				lyricLi.innerHTML = lyricValue;
				lyricLi.classList = "lyricLi";
				lyricsUlDocument.appendChild(lyricLi);
			})

			this.lyricsArr = lyrics
			console.log(this.lyricsArr)
		},
		/* 判断是否手动让歌词滚动，3s后回到正在播放的地方
			默认歌词随时间滚动，原理是控制 歌词区域的 marginTop 值，
		外面父盒子对超出部分隐藏实现的，所以滚动条是没有变化的，
		而且一直在最顶部。
			当用户用鼠标滚动是，滚动条才会变化，当 不滚动时 3 秒后回顶，
		就是当前正在播放的歌词最佳位置。
		 */
		lyricScroll() {
			console.log('歌词滚动')
			// 当开始滚动，延时 5s 后进行回顶
			setTimeout(function() {
				lyric = document.querySelector('div.song-lyric div.lyric');
				lyric.scrollTo({
					behavior: "smooth", // 平滑过渡
					top: 0
				});
			}, 3000);
		},
		openPlayList() {
			// 1、打开音乐播放列表
			this.drawerVisible = true
			// 2、对于正在播放的歌曲，样式改变
			// this.isPlayingStyle()
		},
		// 去用户页面
		toUser() {
			const iframeDocument = document.querySelector("#indexIframe")
			iframeDocument.setAttribute('src', 'menus/mySong/mySong.html')
		},
		// 是否我喜欢
		changeLove(flag, id) {
			axios({
				method: 'get',
				url: 'http://localhost:8160/user/changeLove/1/' + flag + '/' + id,
				headers: {
					'token': this.getCookie('yxy-pre:user_token')
				}
			}).then(res => {
				//处理返回的数据，如果登录成功，保留登录成功的状态，转向成功页面。如果登录不成功，提示用户
				if (res.data != undefined && res.data.code == 200) {
					console.log(res.data)
					for (var i = 0; i < this.songList.length; i++) {
						if (this.songList[i].songId == id) {
							this.songList[i].isLove = flag
						}
					}
				} else {
					this.$message.error(res.data.message)
				}
			})
		},
		// 退出，删除 cookie
		exit() {
			var userLogin = this.getCookie('yxy-pre:user_token')
			// 给cookie 设置一个已经过期的时间就行了
			document.cookie = 'yxy-pre:user_token=; expires=Thu, 01 Jan 1970 00:00:00 UTC'
			// 清空用户数据
			this.userInfo = ''
			// 
		},
		toSong(id) {
			console.log(id)
			const fatherHtml = document.querySelector("#indexIframe")
			fatherHtml.setAttribute('src', 'song/song.html?id=' + id)
		},
		toSinger(id) {
			console.log(id)
			const fatherHtml = document.querySelector("#indexIframe")
			fatherHtml.setAttribute('src', 'singer/singer.html?id=' + id)
		},
		toAlbum(id) {
			console.log(id)
			const fatherHtml = document.querySelector("#indexIframe")
			fatherHtml.setAttribute('src', 'album/album.html?id=' + id)
		},
		getOneSong() {
			axios({
				method: 'get',
				url: 'http://localhost:8160/user/getOneSong/' + this.key,
				headers: {
					'token': this.getCookie('yxy-pre:user_token')
				}
			}).then(res => {
				//处理返回的数据，如果登录成功，保留登录成功的状态，转向成功页面。如果登录不成功，提示用户
				if (res.data != undefined && res.data.code == 200) {
					console.log(res.data)
					this.songList[0] = res.data.data.songInfo
					this.getSongInfo()
					// 调用播放音乐
					this.isPlay()
				} else { //登陆失败
					this.$message.error(res.data.message)
				}
			})
		},
		// 歌曲下载
		songLoad(url, name){
			download(url, name+'.mp3')
		}
	}
})

// backTop 监听页面滚动
// window.addEventListener('scroll', this.isScroll)

// function isScroll() {
// 	// 监听页面滚动事件
// 	// 垂直滚动距离
// 	var oTop = document.body.scrollTop || document.documentElement.scrollTop
// 	var backTop = document.querySelector('div.backTop');
// 	if (oTop > 0) {
// 		backTop.style.visibility = 'visible'
// 	} else {
// 		backTop.style.visibility = 'hidden'
// 	}
// }